<template>
  <div class="add-dialog-content">
    <el-button type="primary" size="medium" @click="addFormVisible = true">添加</el-button>
    <el-dialog title="商品出入库信息" :visible.sync="addFormVisible">
      <el-form :model="product" class="dialog-form">
        <el-form-item label="品牌" :label-width="formLabelWidth" required>
          <el-select allow-create filterable v-model="product.brand" default-first-option placeholder="请选择品牌">
            <el-option v-for="item in brands" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="型号" :label-width="formLabelWidth" required>
          <el-select allow-create filterable v-model="product.model" default-first-option placeholder="请输入型号">
            <el-option v-for="item in brands" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="颜色" :label-width="formLabelWidth" required>
          <el-select allow-create filterable v-model="product.color" default-first-option placeholder="请输入颜色">
            <el-option v-for="item in brands" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="串码" :label-width="formLabelWidth" required>
          <el-select
            allow-create
            filterable
            v-model="product.imei"
            multiple
            default-first-option
            placeholder="运行内存"
          ></el-select>
        </el-form-item>
        <el-form-item label="运行内存" :label-width="formLabelWidth" required>
          <el-select allow-create filterable v-model="product.ram" default-first-option placeholder="运行内存">
            <el-option v-for="item in GLOBAL.rams" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="存储容量" :label-width="formLabelWidth" required>
          <el-select
            allow-create
            filterable
            v-model="product.storage"
            default-first-option
            placeholder="请输入存储容量"
          >
            <el-option v-for="item in GLOBAL.storages" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="add_product_info">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import GLOBAL from '@/GLOBAL'
export default {
  data() {
    return {
      GLOBAL: GLOBAL,
      addFormVisible: false,
      formLabelWidth: '100px',
      brands: ['vivo'],
      product: {
        brand: '',
        color: '',
        imei: [],
        model: '',
        ram: '',
        storage: '',
      },
    }
  },
  mounted() {},
  methods: {
    add_product_info() {
      this.product.count = this.product.imei.length
      console.log(this.product)
      this.$http.post('/product', this.product).then(res => {
        if (res.status == 201) {
          console.log(res.data)
          this.addFormVisible = false
          this.$message({
            message: '入库成功',
            type: 'success',
          })
          this.$emit('update_data')
        }
      })
    },
  },
}
</script>

<style scoped>
.add-dialog-content {
  /* float: right; */
  display: inline-block;
  margin: 0 10px;
}
</style>
